Node + Socket.IO で簡単なチャットアプリの作成

うえじゅん

2012.10.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、うえじゅんです。
今回はタイトル通りNodeとSocket.IOを使って簡単なチャットアプリを作ってみたいと思います。

「Node」のインストール

インストールはとても簡単です。
公式サイトからダウンロードしてインストールするだけです。
(確認した環境はMacです)

インストールが完了したらターミナルで「node -v」と入力して「v0.8.12」と表示されていれば無事成功です。

ついでに「Express」もインストールします。
ターミナルで以下のコマンドを実行してください。
(エラーが出る場合は、「sudo」をつけてみてください。)

「Express」

npm install -g express

インストールが終わったらこちらもバージョンを確認しておきましょう。
「express -V」で「3.0.0rc5」と表示されたら成功です。

プロジェクトの作成

ターミナルで「express アプリ名」と入力して実行します。
(今回は「cmapp」という名前にしました)

$ express cmapp
  create : cmapp
  create : cmapp/package.json
  create : cmapp/app.js
  create : cmapp/public
  create : cmapp/public/javascripts
  create : cmapp/public/images
  create : cmapp/public/stylesheets
  create : cmapp/public/stylesheets/style.css
  create : cmapp/routes
  create : cmapp/routes/index.js
  create : cmapp/routes/user.js
  create : cmapp/views
  create : cmapp/views/layout.jade
  create : cmapp/views/index.jade

  install dependencies:
    $ cd cmapp && npm install
 
  run the app:
    $ node app

実行すると上記のようにプロジェクトが作成されます。

ではまず「Socket.IO」を使えるように「package.json」を修正しましょう。
「 "socket.io": "*"」を追加します。(jadeの行の最後に「,」も追加します)

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.0.0rc5",
    "jade": "*",
    "socket.io": "*"
  }
}

編集が終了したら、「npm install」を実行します。
これは必要なパッケージのインストールになります。

少し時間がかかりますが、完了すると「node_modules」というフォルダが作成されていると思います。
「express」「jade」「socket.io」が入っていれば成功です。

app.jsの修正

ちなみにエディタは何でもいいですが、「Sublime Text2」はオススメです。
(参考：「1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方）」)

/**
 * Module dependencies.
 */

var express = require('express')
  , http = require('http')
  , path = require('path')
  , io = require('socket.io')

var app = express()
  , server = require('http').createServer(app)
  , io = io.listen(server);

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

server.listen(app.get('port'))

io.sockets.on('connection', function(socket) {
  socket.on('message:send', function(data) {
    io.sockets.emit('message:receive', { message: data.message });
  });
});

ポイントは「Socket.IO」をrequireして必要な設定を追加した上で、「connection」イベントを作成しています。
(デフォルトで作成される不要なものも削除してあります)

index.html と chat.jsの作成

プロジェクト作成時に「public」フォルダが作成されていますので、その配下に「index.html」を「javascripts」の配下に「chat.js」を配置します。

見た目を少し良くしたいので「Bootstrap」も利用するのでダウンロードしてきた「bootstrap.css」を「public - stylesheets」の下にコピーしておきます。

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>cmapp</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="/stylesheets/bootstrap.css">
</head>
<body>

  <div class="page-header">
    <h3>クラスメソッド開発ブログ <small>node + socket.io chat app sample</small></h3>
  </div>
  <div class="hero-unit">
    <div class="input-append">
      <input class="span5" id="message" type="text" placeholder="入力してください">
      <button class="btn btn-primary" type="button" onclick="send()">送信</button>
    </div>
    <div id="chat-area" style="height: 300px; overflow: scroll;"></div>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/javascripts/chat.js"></script>
</body>
</html>

「chat.js」

var socket = io.connect();

socket.on('message:receive', function (data) {
  $("div#chat-area").prepend("<div>" + data.message + "</div>");
});

function send() {
  var msg = $("input#message").val();
  $("input#message").val("");
  socket.emit('message:send', { message: msg });
}

「socket.emit」は指定した名前でイベントを送信します。
「socket.on」は「socket.emit」で送信された同名のイベントを受け取ります。

「io.sockets.emit」は自分を含む接続している全員にイベントを送信します。